<template>
	<div class="nav">
		<div class="head" @click="linkToAccount">
			<img src="/images/9.jpg" alt="" />
		</div>

		<div class="nav-list">
			<el-menu :default-active="active" :router="true" class="el-menu-vertical-demo">
				<el-menu-item index="/home">
					<el-icon size="22">
						<HomeFilled />
					</el-icon>
					<span>Home</span>
				</el-menu-item>
				<el-menu-item index="/keys">
					<el-icon>
						<Key />
					</el-icon>
					<span>Keys</span>
				</el-menu-item>
				<el-menu-item index="/explore">
					<el-icon>
						<Search />
					</el-icon>
					<span>Leaderboard</span>
				</el-menu-item>
				<el-menu-item index="/chats">
					<el-icon>
						<ChatRound />
					</el-icon>
					<span>Chats</span>
				</el-menu-item>
				<el-menu-item index="/airdrop">
					<el-icon>
						<TrendCharts />
					</el-icon>
					<span>Airdrop</span>
				</el-menu-item>
			</el-menu>
		</div>
	</div>
</template>

<script setup>
import { ChatRound, HomeFilled, Key, Search, TrendCharts } from "@element-plus/icons";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const active = ref("/home");
onMounted(() => {
	active.value = window.location.pathname;
});

const router = useRouter();

const linkToAccount = () => {
	router.push("/account");
};
</script>

<style scoped lang="scss">
.nav {
	padding: 16px;

	.head {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10px;

		img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	:deep(.el-menu) {
		margin: 20px 0;
		border-right: none;
		background-color: #fdfbf7;
	}
}

// Responsive styles
@media (max-width: 768px) {
	.nav {
		padding: 10px;

		.head {
			margin-left: 5px;
			img {
				width: 40px;
				height: 40px;
			}
		}

		:deep(.el-menu) {
			margin: 10px 0;
		}
	}
}

@media (max-width: 480px) {
	.nav {
		.head {
			margin-left: 0;
			justify-content: start;
			display: none;
		}

		:deep(.el-menu) {
			.el-menu-item {
				display: flex;
				align-items: center;

				.el-icon {
					margin-right: 10px;
				}
			}
		}
	}

	.nav .nav-list :deep(.el-menu) {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.el-menu-item {
			flex-grow: 1;
			display: flex;
			justify-content: center;

			span {
				display: none;
			}
		}

		.menu-text {
			display: none; // Hide the text labels
		}
	}
}
</style>
